<script setup>
import { ref, onMounted } from 'vue';
import { getNiceList } from '@/api/portal/content';
import { getCategoryChild } from '@/api/portal/category';

const companyNewsList = ref([]);
const IndustryNewsList = ref([]);
const NewsChildList = ref([]);

onMounted(async () => {
    const companyRes = await getNiceList({
        category_id: 10,
        limit: 5,
        isnice: 1
    });
    companyNewsList.value = companyRes.data;
    const industryRes = await getNiceList({
        category_id: 11,
        limit: 5,
        isnice: 1
    });
    IndustryNewsList.value = industryRes.data;
    const childRes = await getCategoryChild(2);
    NewsChildList.value = childRes.data;
});
</script>

<template>
    <div class="py-6 px-6 lg:px-20 my-12">
        <div class="flex flex-row justify-between items-center mt-10 mb-6 px-2">
            <div class="flex items-center gap-4">
                <span class="text-3xl font-medium text-surface-900 dark:text-surface-100">新闻资讯</span>
                <span class="text-2xl font-regular text-surface-500 dark:text-surface-400">News</span>
            </div>
            <div class="flex items-center gap-4">
                <Button label="更多" size="large" class="lg:!hidden"></Button>
                <div class="hidden lg:flex flex-auto items-center gap-4">
                    <Button as="router-link" to="/portal/news/2" label="全部" size="large" class="whitespace-nowrap"></Button>
                    <Button as="router-link" :to="item.cate_link" :label="item.cate_name" size="large" outlined class="whitespace-nowrap" v-for="item in NewsChildList" :key="item.cate_id"></Button>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-12 gap-4 justify-between">
            <div class="col-span-12 lg:col-span-6 p-0 md:p-4">
                <ul class="list-none p-0 m-0">
                    <li v-for="item in IndustryNewsList" :key="item.id" class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                        <router-link :to="item.link">
                            <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">{{ item.title }}</span>
                            <div class="mt-1 text-muted-color">{{ item.description }}</div>
                        </router-link>
                        <div class="mt-2 md:mt-0 flex items-center">
                            <span class="ml-4 font-medium text-primary">{{ item.create_time }}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="col-span-12 lg:col-span-6 p-0 md:p-4">
                <ul class="list-none p-0 m-0">
                    <li v-for="item in companyNewsList" :key="item.id" class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                        <router-link :to="item.link">
                            <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">{{ item.title }}</span>
                            <div class="mt-1 text-muted-color">{{ item.description }}</div>
                        </router-link>
                        <div class="mt-2 md:mt-0 flex items-center">
                            <span class="ml-4 font-medium text-primary">{{ item.create_time }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
